<template>
  <div class="contacts-container">
    <van-nav-bar title="联系人" />
    <van-contact-list
      v-model="activeContact"
      :list="contactList"
      @select="onSelect"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeContact = ref('')
const contactList = ref([
  {
    name: '张三',
    tel: '13000000000',
    id: '1',
  },
  {
    name: '李四',
    tel: '13111111111',
    id: '2',
  },
  {
    name: '王五',
    tel: '13222222222',
    id: '3',
  }
])

const onSelect = (contact) => {
  router.push('/chat')
}
</script>

<style scoped>
.contacts-container {
  height: 100vh;
  background-color: #f7f8fa;
}
</style>